<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>魔方</title>
    <link href="stylesheets/doc.css" rel="stylesheet">
    <link href="stylesheets/Cube.css" rel="stylesheet">
    <script src="scripts/3d%20TransForm.js"></script>
    <script src="scripts/View&Control.js"></script>
    <script src="scripts/Model_Block.js"></script>
    <script src="scripts/Model_Cube.js"></script>
</head>
<body>
<header id="head">魔方</header>
<div class="container">
    <div class="box">
        <div class="content">
            <div class="surface u"></div>
            <div class="surface d"></div>
            <div class="surface f"></div>
            <div class="surface b"></div>
            <div class="surface l"></div>
            <div class="surface r"></div>
            <!--控制层-->
            <div class="rotate-buttons">
                <div class="rbs surface cu">
                    Z
                    <button class="rotate-button left" id="btn-ul"></button>
                    <button class="rotate-button up" id="btn-uu"></button>
                </div>
                <div class="rbs surface cf">
                    Y
                    <button class="rotate-button left" id="btn-fl"></button>
                    <button class="rotate-button down" id="btn-fd"></button>
                </div>
                <div class="rbs surface cr">
                    X
                    <button class="rotate-button right" id="btn-rr"></button>
                    <button class="rotate-button down" id="btn-rd"></button>
                </div>
                <div class="cf2 surface"></div>
                <div class="cr2 surface"></div>
                <div class="cu2 surface"></div>
            </div>
        </div>
    </div>
</div>
<div class="control-buttons">
    <div class="control">
        <button id="btn-control">显示控制按钮</button>
    </div>
    <div class="model-buttons">
        <button class="model-button" id="rise">升阶</button>
        <button class="model-button" id="reduce">降阶</button>
        <button class="model-button" id="rotate">打乱</button>
        <button CLASS="model-button" id="reset">重置</button>
        <div class="rotate-layer-buttons" id="sun-model">
            <button class="rotate-button turn-up" id="tu">↑</button>
            <button class="rotate-button turn-down" id="td">↑</button>
            <button class="rotate-button turn-left" id="tl">↑</button>
            <button class="rotate-button turn-right" id="tr">↑</button>

            <button class="change-control-model choose-surface" id="btn-sun"></button>
            <button class="choose-surface " id="btn-c-f">前</button>
            <button class="choose-surface " id="btn-c-u">上</button>
            <button class="choose-surface " id="btn-c-r">右</button>

            <div class="layer-box">
                <div class="layer-info" id="sun-layer"></div>
                <button class="layer-change" id="rise-x-layer">↑</button>
                <button class="layer-change" id="reduce-x-layer">↑</button>
                <button class="layer-change" id="rise-y-layer">↑</button>
                <button class="layer-change" id="reduce-y-layer">↑</button>
                <button class="layer-d-change" id="rise-x-rise-y">↘</button>
                <button class="layer-d-change" id="reduce-x-reduce-y">↘</button>
                <button class="layer-d-change" id="reduce-x-rise-y">↘</button>
                <button class="layer-d-change" id="rise-x-reduce-y">↘</button>
            </div>
        </div>
        <div class="rotate-layer-buttons" id="moon-model">
            <div class="layer-box" id="moon-layer"></div>
            <button class="change-control-model choose-surface" id="btn-moon"></button>
            <button class="moon-rotate" id="clockwise"></button>
            <button class="moon-rotate" id="contrarotate"></button>
            <button class="choose-surface " id="mbtn-c-f">Y</button>
            <button class="choose-surface " id="mbtn-c-u">Z</button>
            <button class="choose-surface " id="mbtn-c-r">X</button>
            <button class="add-layer rotate-button" id="add">↑</button>
            <button class="sub-layer rotate-button" id="sub">↑</button>
        </div>
        <div class="flag-buttons">
            <button class="model-button" id="animation-switch">关闭旋转动画</button>
            <button class="model-button" id="cubeBtn-switch">关闭魔方按钮</button>
        </div>
    </div>

</div>
</body>
</html>